<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>艺考圈</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<div class="app_head">
			<!--<span class="left back"></span>-->
			<span class="name">艺考圈</span>
			<span class="right search"></span>
		</div>
		<div class="app_col_nav clearfix">
			<div class="component_loading"></div>
			<div id="artcircle_nav" class="app_col_inner_nav menuflex"></div>
		</div>
		<div class="app_main">
			<div class="space"></div>
			<div class="app_box transparent">
				<div class="box_cont">
					<ul id="artcircle_list" class="list_item sociality_list clearfix"></ul>
				</div>
			</div>
			<div class="loading_line">
				<a href="javascript:;" class="loading_more"></a>
			</div>
		</div>
		<a id="app_page_btn" href="javascript:;" tapmode onclick="_$.sendComment('circle','NEW心得',null)">+</a>
	</div>
</div>

<script id="artcircle_nav_template" type="text/html">
	<%for(var i in data) {%>
	<a href="javascript:;" tapmode onclick="navClick(<%:=data[i].id%>,this)" class="<%:=data[i].id===0?'active':''%>"><%:=data[i].name%></a>
	<%}%>
</script>
<script id="artcircle_list_template" type="text/html">
	<%for(var i in data) {
	var _data_ = data[i];
	%>
	<li id="xindeid_<%:=data[i].id%>" class="<%:getClassid=data[i].classid%>" tapmode onclick="_$.viewArtcircle(this,<%:=data[i].id%>)">
		<img class="sociality_pic imgcache" src="<%:=img%>" data_src="<%:=data[i].avatar%>" alt="">
		<span class="sociality_username<%if(_data_.isMechanism==true){%> jigou<%}%>">
			<%:=_data_.author%>
		</span>
		<span class="sociality_date">
			<%:=_data_.date%>
		</span>
		<span class="sociality_zan <%:=data[i].zan.end===true?'active':'unactive'%>">
			<%:=_data_.zan.num%>
		</span>
		<span class="sociality_comment">
			<%if(_data_.comment!==null){%>
				<%:=_data_.comment.length%>
			<%}else{%>
				0
			<%}%>
		</span>
		<%if(_data_.intro!==null){%>
		<div class="sociality_cont clearfix">
			<%:=_data_.intro%>
		</div>
		<%}%>
		<%if(_data_.pics!==null){%>
		<div class="sociality_imgs clearfix">
			<%for(var j in _data_.pics) { var _pics_ = _data_.pics[j]%>
			<img class="imgcache" src="<%:=img%>" data_src="<%:=_pics_.thumb%>" picture="<%:=_pics_.picture%>" alt="">
			<%}%>
		</div>
		<%}%>
	</li>
	<%}%>
</script>

<script>
	var loading=false,
		pageData = [],
		pageIndex = 0,
		pageNavID = 0,
		deleteXinde = function (id) {
			for (var i in pageData) {
				for (var j in pageData[i]) {
					if (_$.getType(pageData[i])==='array' && pageData[i][j].id === id) {
						pageData[i].splice(j,1);
					}
				}
			}
			$('#xindeid_'+id).remove();
			runHtml(getData(),false);
		},
		circle_ajaxCall=function(data){
			runHtml(data,true);
		},
		loadBtn=function(act){
			var btn = $('.loading_line .loading_more');
			if(act==='on'){
				btn.on('click',function(){
					loadmore();
				}).removeClass('nomore');
			}
			if(act==='off'){
				btn.off('click').addClass('nomore');
			}
			if(act==='ing'){
				btn.addClass('active');
			}
			if(act==='end'){
				btn.removeClass('active');
			}
		},
		nocontentHtml = '<li class="nocontent por animated fadeInUp"><img src="../../lib/img/nocomment.png" alt=""><div class="text">暂无相关消息</div></li>',
		//负责获取、合并、更新当前的类目数据，总数输出全部的当前栏目数据。
		getData = function (data) {
			var _data_ = pageData[pageIndex];
			if (_$.getType(data) === 'array') {
				//判断结论 这是数据的合并动作
				if (_data_ === undefined) {
					// 原始数据不存在，需要初始化。
					_data_ = [];
				}
				data.map(function (thisData) {
					_data_.push(thisData);
				})
				pageData[pageIndex] = _data_;
			}
			return _data_;
		},
		dataUpdate = function(data){
			console.log('dataUpdate run');
			if(_$.getType(data)!=='object'){
				return;
			}else{
				for(var i in pageData){
					for(var j in pageData[i]){
						var thisData=pageData[i][j];
						if(thisData.id === data.id){
							pageData[i][j]=data;
						}
					}
				}
				_$.template('artcircle_list_template', {'data': pageData[pageIndex], 'img': _$.imgCache.default}, function (html) {
					$('#artcircle_list').html(html);
					_$.imgCache.load();
				})
			}
		},
		navClick = function (id, obj) {

			if(loading){
				api.toast({
					msg: '您的动作太快了，稍等一下。'
				});
				return;
			}
			if(id===pageNavID){
				return;
			}
			obj = $(obj);
			obj.siblings().removeClass('active');
			obj.addClass('active');
			pageIndex=obj.index();
			pageNavID=id;
			loadBtn('on');
			$('#artcircle_list').html('');
			var contentData = getData();
			if (contentData === undefined) {
				loadmore();
			} else {
				runHtml(contentData);
			}
		},
		runHtml=function(data,newComment){
			if (data && data.length!==0) {
				console.log('runHtml => data ')
				if(newComment===true){
					_$.template('artcircle_list_template', {'data': data.data, 'img': _$.imgCache.default}, function (html) {
						$('#artcircle_list').prepend(html);
						pageData[0].unshift(data.data[0]);
					})
					_$.ajax({
						interface:'addNonu',
						data:{
							type:4
						},
						call:function(data){
							if(data.data){
								api.execScript({
									name: 'index',
									frameName:'user',
									script:'$("#jifenval").text('+data.data+')'
								})
							}
						}
					})
				}else{
					_$.template('artcircle_list_template', {'data': data, 'img': _$.imgCache.default}, function (html) {
						$('#artcircle_list').append(html);
					})
				}
				_$.imgCache.load();
			} else if(!data){
				$('#artcircle_list').html(nocontentHtml);
				loadBtn('off');
			}
		},
		loadmore = function () {
			loading=true;
			var length=$('#artcircle_list li').length;
			loadBtn('ing');
			_$.ajax({
				interface:'search',
				data:{
					tag:'artcircle_list',
					number:length,
					cnum:pageNavID
				},
				call:function(data){
					if(data.status===200){
						runHtml(data.data);
						getData(data.data);
					}else if(data.status===201){
						if(length===0){
							runHtml();
						}
						loadBtn('off');
					}else{
						api.toast({
							msg:data.msg
						})
					}
					_$.sleep(function(){
						loadBtn('end');
						loading=false;
					},500);
				}
			})
		},
		showActBtn = function () {
			_$.db.get({
				call:function(data){
					if(data.token!==null && (data.type===1||data.type===2)){
						_$.sleep(function () {
							$('#app_page_btn').fadeIn()
						}, 1000);
					}
				}
			})
		},
		appready = function () {

			//初始化正文默认列表
			_$.db.get({
				key: 'artcircle_list',
				call: function (data, img) {
					//将pageData对应位置的数据的填充好
					pageData[pageIndex] = data;
					runHtml(data);
					loadBtn('on');
				}
			})

			showActBtn();

			//初始化顶部分类导航
			_$.db.get({
				key: 'classify',
				call: function (data) {
					_$.template('artcircle_nav_template', {'data': data, 'img': _$.imgCache.default}, function (html) {
						$('#artcircle_nav').html(html);
						var w = 0, as = $('#artcircle_nav a');
						for (var i = 0; i < as.length; i++) {
							w += (as.eq(i).width());
						}
						_$.sleep(function () {
							$('.component_loading').fadeOut(function () {
								$('.app_col_inner_nav').addClass('loaded animated fadeIn');
							});
						}, 500);
					});
				}
			})

		};

</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>